import router from '@/router'
import store from '@/store'
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css'
// import { asyncRoutes } from '@/router'

// 白名单: 可以让没有token的人去这些组件
const whiteList = ['/login', '/404']

// 设置前置守卫
// to: 要去的组件
// from:从哪个组件来的
// next:放行
router.beforeEach(async(to, from, next) => {
  // 开启进度条效果
  NProgress.start()

  // 获取token
  const token = store.getters.token

  if (token) {
    // 存在token
    // 有token去登录页,跳转到首页,其它放行
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      // 正常放行
      // 在这里获取用户资料,如果进入页面才获取,时间已经晚了,
      // 当页面需要用户的信息时,可能会出现白屏等数据的情况
      if (!store.state.user.userInfo.userId) {
        const { roles: { menus }} = await store.dispatch('user/getUserInfo')
        // console.log(menus)
        // console.log(to)
        // 1.这里获取到用户有哪些权限
        // 2.根据这些权限过滤出用户有哪些路由

        // const otherRoutes = async.filter(xxxx)

        // 语法: router.addRouters([路由对象1{},路由对象2{},....])
        // router.addRoutes(asyncRoutes) // 添加路由 "异步的"
        const otherRoutes = await store.dispatch('permission/filterRoutes', menus)
        router.addRoutes([
          ...otherRoutes,
          { path: '*', redirect: '/404', hidden: true }
        ])
        // // 重新再进一次页面
        next({
          ...to,
          replace: true
        })
        return
      }

      next()
    }
  } else {
    // 没有token
    // 没有token判断是否在白名单中,如果不在,跳转到登录页
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 设置后置守卫
router.afterEach((to, from) => {
  // 结束进度条效果
  NProgress.done()
})
